<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>供应商-审批</title>
	<style type="text/css">
	*{margin: 0; padding: 0;}
	 .page{ width:1200px; margin: 0 auto; overflow: hidden; position: relative; display: none;}
	 .page1{ display: block; }
	 .page img{ width: 100%}
       .page:nth-child(1){display: block;}
       .pane{ border: 2px solid red; }
       .pane1{ width: 152px; height: 54px;position: absolute; top: 8.9%; right: 18.7%;}
       .pane2{ width: 340px; height: 50px;position: absolute; top:44.1%; right: 7%}
       .pane3{ width: 124px; height: 42px;position: absolute; top:9.2%; right: 6%}
       .pane4{ width: 124px; height: 30px;position: absolute; top:72.8%; left: 9%}
       .pane5{ width: 64px; height: 24px;position: absolute; top:77.2%;right: 11.3%}
       .pane6{ width: 72px; height: 30px;position: absolute; bottom:16.3%; right: 19%}
	</style>
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="page page1">
	  <img src="images/caigoufangshenpi-1.png">
	  <div class="pane pane1"></div>
	</div>
	<div class="page page2">
		<img src="images/caigoufangshenpi-2.png">
          <div class="pane pane2"></div>
	</div>
	<div class="page page3 to800">
		<img src="images/caigoufangshenpi-3.png">
          <div class="pane pane3"></div>
	</div>
  	<div class="page page4">
    	<img src="images/caigoufangshenpi-4.png">
          <div class="pane pane4"></div>
  	</div>
  	<div class="page page5 to800">
    	<img src="images/caigoufangshenpi-5.png">
          <div class="pane pane5"></div>
  	</div>

  	<div class="page page6 last">
    <img src="images/caigoufangshenpi-6.png">
          <div class="pane pane6"></div>
  </div>
	<script>
                $(function(){
                	var timer;
                	timer=setInterval(function(){
                		$(".pane").toggle()
                	},600);

                	$(".page").click(function(){
                        if($(this).hasClass('to800')){
                          $(this).hide();
                          $(this).next().stop().show(0,function(){
                            $('html, body').animate({  
                                 scrollTop: 500  
                             },100); 
                          })
                        }
                         if($(this).hasClass('last')){
                          return false;
                        }
                        else{
                          $(this).hide();
                          $(this).next().stop().show()
                        }	
                	})
                })
	</script>
</body>
</html>